<template>
	<view class="control">
		<!-- 头部 -->
		<view class="header">
			<image mode="widthFix" :src="headerImage[state]"></image>
			<view class="info-box">
				<nav-bar :title="name"></nav-bar>
				<view class="info">
					<view>
						<!-- status 3 已上课
						status 2 请假
						status 1 未上课 -->

						<view class="flex-space-between">
							<view class="title">{{name}}/{{hour_info.train_content}}</view>
							<view class="state " style="color: #EB4751;" v-if="hour_info.status == 3">已上课</view>
							<view class="state " style="color: #EB4751;" v-if="hour_info.status == 2">请假</view>
							<view class="state " style="color: #999;" v-if="hour_info.status == 1">未上课</view>
						</view>
						<view class=" flex-space-between">
							<view class="flex-align tag-list">
								<view class="tag">{{hour_info.train_content}}</view>
								<view class="tag">时长{{hour_info.time_long}}分钟</view>
							</view>
							<!-- <view  style="color: #EB4751;margin-top: 10rpx;">
								<button style="height: 60rpx;width: 100rpx;line-height: 60rpx;font-size: 22rpx; " @click="gouwuche">上课</button>
							</view> -->
						</view>
					</view>
					<view class="flex-align " style="margin-top: 10rpx;">
						<!-- <view class="info-item">
							<van-icon name="location" size="20rpx" />
							<text>大连体育馆第一用词</text>
						</view> -->
						<view class="info-item ">
							<van-icon name="clock" size="20rpx" />
							<text>{{hour_info.hour_time}}</text>
						</view>

					</view>
				</view>

			</view>
		</view>

		<view class="tongji flex-align">
			<view class="item flex-align">
				<text>总人数：</text>
				<text class="value">{{stat.total_cnt}}</text>
			</view>
			<view class="item flex-align">
				<text>已点名：</text>
				<text class="value">{{stat.sign_in_cnt}}</text>
			</view>
			<view class="item flex-align">
				<text>请假：</text>
				<text class="value">{{stat.leave_cnt}}</text>
			</view>

			<!-- <view class="item flex-align flex-space-between">
				<text>详情</text>
			</view> -->

		</view>
		<!-- <u-sticky> -->
		<u-tabs :list="tabsList" lineColor="#4786fe" :activeStyle="{
					color: '#2f75fa'
				}" :inactiveStyle="{
					color: '#353535'
				}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
		<!-- </u-sticky> -->
		<!-- is_leave 1未请假 2已请假 -->
		<!-- is_point 1未点名 2已点名 -->
		<scroll-view scroll-y class="list">
			<van-checkbox-group :value="selectList" @change.native="change">
				<view class="item" v-for="(item,index) in studentlist" :key="index" style="position: relative;">
					<view class="" style="width: 88%;">
						<!-- @change="onChange" -->
						<van-checkbox checked-color="#635df7" icon-size="40rpx" :name="index" @change="onChange"
							:disabled="item.is_leave == 2">
							<view class="flex-space-between " style="padding: 30rpx 0;" @click='toggle(item)'>
								<view class="flex-align item-detail">
									<view class="avatar">
										<!-- <van-image round width="84rpx" height="84rpx" :src="item.head_img" @tap.stop="viewImg($event,item)"/> -->
										<image style="width: 84rpx;height: 84rpx;border-radius: 50% 50%;"
											:src="item.head_img" mode=""  @click='head_toggle(item)'></image>
										
										<!-- <image style="background-size: 100% 100%;width: 100%; max-height: 100%; margin-top: 60%;" :src="item.head_img"
											@longpress="handledownload(court_pic)" mode=""></image> -->
										<!-- <view class="age" v-if="item.sex == 1">{{item.age}}</view>
										<view class="age-1" v-if="item.sex == 2">{{item.age}}</view> -->
									</view>
									<view>
										<view class="name">{{item.name}} <text v-if="item.is_leave == 2"
												style="padding: 4rpx 10rpx 4rpx 10rpx;background-color: #ff0000;margin-left: 20rpx;color: #ffffff;">请假</text>
										</view>
										<view class="name">
											<text v-if="item.sex == 2" style="padding: 3rpx 22rpx 3rpx;border-radius: 30rpx;
							width: 60rpx;background-color: #ff5fff;color: #ffffff;font-size: 22rpx;">{{item.age}}</text>
											<text v-if="item.sex == 1" style="padding: 3rpx 22rpx 3rpx;border-radius: 30rpx;
							width: 60rpx;background-color: #2f75fa;color: #ffffff;font-size: 22rpx;">{{item.age}}</text>
											<text>{{item.mobile}}</text>
										</view>
										<!-- <view class="flex-align qiandao">
											<text>{{item.mobile}}</text>
										</view> -->

									</view>
								</view>

							</view>
						</van-checkbox>
					</view>
					<!-- //操作类型：1请假，2评课，3签到，4签退，5约课，6调课，7消课，8结课 -->
					<view class="menu-box" v-if="currentTab == 1">
						<!-- v-if="item.checked"  三个点操作-->
						<view style="width: 30rpx;height: 60rpx;" @click.stop="handOpenMenu(index)">
							<image mode="aspectFit"
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/0394eedc55246819ceb9e3e60a38882566d4ca68.png" />
						</view>
						<view class="menu-list" :class="{'active':index === selectItemId}">
							<view class="item flex-align" @click.stop="handAskLeave(1)">
								<image mode="aspectFit" style="width: 28rpx;height: 24rpx;"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/8114f60d5fda424dab5a4868fd7c3d67cae68f64.png" />
								<view>代请假</view>
							</view>
							<view class="item flex-align" @click.stop="handSelectClass">
								<image mode="aspectFit" style="width: 28rpx;height: 28rpx;"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/ee4b7d5cbcab1ee8f5f6bd5c886c346d7941a4cb.png" />
								<view>代预约</view>
							</view>
							<view class="item flex-align" @click.stop="handAskLeave(10)">
								<!-- @click.stop="handSignIn(item,index)" -->
								<image mode="aspectFit" style="width: 29rpx;height: 26rpx;"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/8385d186d69328a5a15cf0dc718c6c7947c86c12.png" />
								<view>签到点名</view>
							</view>
							<!-- <view class="item flex-align" @click.stop="handAskLeave(2)">
								<image mode="aspectFit" style="width: 26rpx;height: 24rpx;"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/64df7b1834d5bd4b64730a50891611212f7f050c.png" />
								<view>评课</view>
							</view> -->

							<!-- <view class="item flex-align" @click.stop="handAskLeave(3)">
								<image mode="aspectFit" style="width: 29rpx;height: 26rpx;"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/8385d186d69328a5a15cf0dc718c6c7947c86c12.png" />
								<view>签到</view>
							</view> -->
							<!-- <view class="item flex-align"  @click.stop="handAskLeave(4)">
								<image mode="aspectFit" style="width: 26rpx;height: 24rpx;"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/9df1791e2628ec08220cc9ab717242f481d57712.png" />
								<view>签退</view>
							</view> -->

							<!-- <view class="item flex-align"  @click.stop="handAskLeave(6)">
								<image mode="aspectFit" style="width: 27rpx;height: 25rpx;"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/bf75692b7d4e501b4af63bcc5e476f2baf9d905d.png" />
								<view>调课</view>
							</view>
							<view class="item flex-align"  @click.stop="handAskLeave(7)">
								<image mode="aspectFit" style="width: 26rpx;height: 24rpx;"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/d6cbf52d0f8b86f3dd8e480006ccfd79a85b9b5b.png" />
								<view>消课</view>
							</view>
							<view class="item flex-align"  @click.stop="handAskLeave(8)">
								<image mode="aspectFit" style="width: 27rpx;height: 32rpx;"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/b4faa6328e21e3f6b21a569480548c16720eb578.png" />
								<view>补课</view>
							</view> -->
						</view>
					</view>
					<view class="menu-box" v-if="currentTab == 0" @click="chexiaolist(item,index)">
						<!-- v-if="item.checked"  三个点操作-->
						<view style="width: 60rpx;height: 60rpx;">
							<image style="width: 60rpx;height: 60rpx;" mode="aspectFit"
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/38d16d3f96ae28cab5efc0ca0c976b7723bfb063.png" />
						</view>
					</view>
					<!-- <view class="desc">
						{{item.record}}
					</view> -->
					<view class="" style="width: 88%;height: 100%;position: absolute;left: 0;top: 0;"
						v-if="item.is_leave == 2 && currentTab == 0">

					</view>
					<view class="" style="width: 100%;height: 100%;position: absolute;left: 0;top: 0; "
						v-if="item.is_leave == 2 && currentTab == 1">

					</view>
				</view>

			</van-checkbox-group>
		</scroll-view>

		<!-- 底部 -->
		<view class="footer">
			<van-checkbox :value="isAllSelect" checked-color="#635df7" icon-size="40rpx" @change.native="allChange">
				<view class="flex-space-between">
					<view class="label">全选</view>
					<image @click.stop="bgMenuShow= true" mode="aspectFit" v-if="currentTab == 1"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/9d24502ffae5e3068e83d92eb563659ecea64b42.png" />
					<view class="" v-if="currentTab == 0" @click.stop="handAskList(15)">
						<button type="default" style="width: 170rpx;height: 70rpx;font-size: 26rpx;">课后作业</button>
					</view>
					<view class="" v-if="currentTab == 0" @click.stop="handAskLeave(2)">
						<button type="default"
							style="width: 170rpx;height: 70rpx;font-size: 26rpx;background-color: #4786fe;color: #ffffff;">课后点评</button>
					</view>
				</view>
			</van-checkbox>
		</view>

		<!-- 底部菜单 -->
		<!-- //操作类型：1请假，2评课，3签到，4签退，5约课，6调课，7消课，8结课 -->
		<view class="overlay" :class="{'show':bgMenuShow}" v-if="currentTab == 1">
			<view class="title">学员操作</view>
			<view class="bg-menu">
				<view class="bg-menu-item flex-center" @click="handAskLeave(1)">
					<van-image width="48rpx" height="40rpx"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/8114f60d5fda424dab5a4868fd7c3d67cae68f64.png" />
					<view>代请假</view>
				</view>
				<view class="bg-menu-item flex-center" @click="handSelectClass">
					<van-image width="43rpx" height="43rpx"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/ee4b7d5cbcab1ee8f5f6bd5c886c346d7941a4cb.png" />
					<view>代预约</view>
				</view>
				<view class="bg-menu-item flex-center" @click="handAskLeave(10)">
					<van-image width="47rpx" height="44rpx"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/8385d186d69328a5a15cf0dc718c6c7947c86c12.png" />
					<view>签到点名</view>
				</view>
				<!-- <view class="bg-menu-item flex-center" @click="handAskLeave(3)">
					<van-image width="47rpx" height="44rpx"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/8385d186d69328a5a15cf0dc718c6c7947c86c12.png" />
					<view>签到</view>
				</view> -->
				<!-- <view class="bg-menu-item flex-center"  @click="handAskLeave(4)">
					<van-image width="43rpx" height="43rpx"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/9df1791e2628ec08220cc9ab717242f481d57712.png" />
					<view>签退</view>
				</view>
				<view class="bg-menu-item flex-center"  @click="handAskLeave(8)">
					<van-image width="35rpx" height="43rpx"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/b4faa6328e21e3f6b21a569480548c16720eb578.png" />
					<view>补课</view>
				</view> -->
				<view class="bg-menu-item flex-center" @click="handAskLeave(2)">
					<van-image width="47rpx" height="43rpx"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/64df7b1834d5bd4b64730a50891611212f7f050c.png" />
					<view>评课</view>
				</view>
				<!-- <view class="bg-menu-item flex-center"  @click="handAskLeave(6)">
					<van-image width="47rpx" height="43rpx"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/bf75692b7d4e501b4af63bcc5e476f2baf9d905d.png" />
					<view>调课</view>
				</view> -->
				<!-- <view class="bg-menu-item flex-center"  @click="handAskLeave(7)">
					<van-image width="43rpx" height="43rpx"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/d6cbf52d0f8b86f3dd8e480006ccfd79a85b9b5b.png" />
					<view>消课</view>
				</view> -->

			</view>
			<view class="flex-center">
				<van-image @click="bgMenuShow=false" width="48rpx" height="48rpx"
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/5397911b98a51ae8f01f645182d58744f770de13.png" />
			</view>
		</view>

		<!-- 签到 -->
		<!-- <con-toast title="请确认签到" btnTxt="确定" v-model="signInShow" @confirm="signInConfirm"/> -->
		<view
			style="width: 100%;height: 100vh;background-color: rgba(0, 0, 0, 0.6);position: absolute;z-index: 990;top: 0;left: 0;"
			v-if="qiandao"></view>
		<view
			style="width: 70%;height: 30vh;background-color: rgb(255, 255, 255);position: absolute;z-index: 999;top: 30vh;left: 15%;"
			v-if="qiandao">
			<view style="text-align: center;font-size: 32rpx;font-weight: 700;margin-top: 20rpx;">
				请确认签到
			</view>
			<view style="text-align: left;font-size: 26rpx;font-weight: 700;margin-left: 20rpx;margin-top: 30rpx;"
				@click="show = true">
				签到时间:
			</view>
			<view style="border: 1rpx #cbcbcb solid;width: 80%;height: 50rpx;margin-left: 20rpx;margin-top: 20rpx;"
				@click="show = true">
				<input type="text" disabled='false' placeholder="选择签到时间" v-model="datatime"
					placeholder-style="font-size: 20rpx">
			</view>
			<view style="width: 100%;height: 100rpx;background-color: antiquewhite;position: absolute;bottom: 0;">
				<view
					style="width: 50%;height: 100rpx;background-color: #ffffff;float: left;border: 0.5rpx #cbcbcb solid;font-size: 30rpx;text-align: center;line-height: 100rpx;"
					@click="qiandaoguanbi">
					取消
				</view>
				<view
					style="width: 50%;height: 100rpx;background-color: #ffffff;float: right;border: 0.5rpx #cbcbcb solid;color: #cb6456;font-size: 30rpx;text-align: center;line-height: 100rpx;"
					@click="signInConfirm">
					确定
				</view>
			</view>
			<u-datetime-picker :show="show" v-model="value1" mode="datetime" @confirm="timelist" :minDate="-845628841" :maxDate="2856778555000"
				@cancel="show = false"></u-datetime-picker>
		</view>
		<view v-if="pan_img" @click="pan_img = false" style="width: 100%; height: 100%;background-color:#000;
		position: absolute;
		top:0;
		left:0;z-index: 999;">
			<!-- <image style="background-size: 100% 100%;width: 100%; max-height: 100%; margin-top: 60%;" :src="court_pic"
				@longtap="shareImg(court_pic)" mode=""></image> -->
			<image
				style="background-size: 100% 100%;width: 100%; max-height: 100%; margin-top: 60%;"
				:src="court_pic" @longpress="handledownload(court_pic)" mode=""></image>
		</view>
	</view>
</template>

<script>
	const train = require("@/api/train/index.js");
	const personal = require("@/api/personal/index.js");
	export default {
		data() {
			return {
				headerImage: [ //0进行中，1待开课，2已上课
					'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/6693ff9cb5152cbdf72af8d10c0b9c86bc807748.png',
					"https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/b00e2d4ab153255cf8412090103afadb36e7cb1d.png",
					"https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/fac6046c84510f249a930160cb429ed48ebec29d.png",
				],
				selectList: [],
				isAllSelect: false, //是否全选
				bgMenuShow: false, //全局菜单弹窗
				selectItemId: -1,
				showMenu: true,
				state: 0, //0进行中，1待开课，2已上课，3待排课
				signInShow: false, //重复签到
				studentlist: [{
						recording: '10',
						name: '宗',
						time: '7:10',
						class_time: '17:20',
						record: '请假',
						checked: false
					},
					{
						recording: '12',
						name: '袁',
						time: '7:20',
						class_time: '16:00',
						record: '调课',
						checked: false
					},
					{
						recording: '15',
						name: '石',
						time: '7:00',
						class_time: '17:00',
						record: '正常',
						checked: false
					},
				],
				show: false,
				value1: Number(new Date()),
				datatime: '',
				qiandao: false,
				class_hour_id: "",
				class_id: '',
				stat: {},
				hour_info: {},
				name: "",
				applicantlist: [],
				currentTab: 0,
				currentTabs: 2,
				tabsList: [{
						name: '已点名'
					},
					{
						name: '待点名'
					},
				],
				pan_img:false,
				court_pic:""
			}
		},
		onLoad(options) {
			this.class_hour_id = options.class_hour_id
			this.class_id = options.class_id
			this.name = options.name
			this.hour_students()
		},
		onShow() {
			this.bgMenuShow = false
			this.selectList = []
			this.isAllSelect = false
			this.applicantlist = []
			this.hour_students()
		},
		methods: {
			head_toggle(item){
				this.pan_img = true
				this.court_pic= item.head_img
			},
			// 图片放大
			handledownload(item) {
				const that = this
				wx.downloadFile({
					url: court_pic,
					success: res => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: '保存成功',
										duration: 2000
									})

								},
								fail: function() {
									uni.showToast({
										title: '保存失败',
										duration: 2000
									})

								}
							})
						} else {
							uni.showToast({
								title: '保存失败',
								duration: 2000
							})
						}
					}
				})
			},

			// 撤销
			async chexiaolist(item, index) {
				let that = this
				uni.showModal({
					title: '是否确认撤销！',
					// 提示文字
					// content: '是否取消订单？',
					// 取消按钮的文字自定义
					cancelText: "取消",
					// 确认按钮的文字自定义
					confirmText: "确定",
					//删除字体的颜色 
					confirmColor: '#000000',
					//取消字体的颜色
					cancelColor: '#999',
					success: function(res) {
						if (res.confirm) {
							// 执行确认后的操作
							that.applicantlist = []
							that.applicantlist.push(item.id)


							let params = {
								app_id: that.$https.weixinAppId,
								record_ids: that.applicantlist,
								op: 11,
							};
							// let res = await train.record(params);
							train.record(params).then(res => {
								if (res.code == 1) {
									that.hour_students()
								}

							})

						}
					}
				})

			},

			gouwuche() {
				// uni.navigateTo({
				// 	url:'/page_other/gouwuche/gouwuche'
				// })
			},
			onClickTab({
				index
			}) {
				this.currentTab = index;
				// this.currentTabs = index + 1;
				if (index == 0) {
					this.currentTabs = 2
				} else if (index == 1) {
					this.currentTabs = 1
				}
				this.list = []
				this.hour_students()
			},
			// 课节学员列表
			async hour_students() {
				let that = this;
				let params = {
					app_id: this.$https.weixinAppId,
					class_hour_id: this.class_hour_id,
					class_id: this.class_id,
					is_point: this.currentTabs
				};
				let res = await personal.hour_students(params);
				if (res.code == 1) {
					this.studentlist = res.data.list
					this.stat = res.data.stat
					this.hour_info = res.data.hour_info
				}
			},
			timelist(value) {
				this.show = false
				let date = new Date(value.value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				this.datatime = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
				return y + '-' + MM + '-' + d; //年月日
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s; //年月日时分秒
			},
			// 关闭时间弹窗
			showclose() {
				this.show = false
			},
			//操作类型：1请假，2评课，3签到，4签退，5约课，6调课，7消课，8结课
			// 签到
			async signInConfirm() {
				if (this.datatime != '') {
					this.signInShow = false
					let params = {
						record_ids: this.applicantlist,
						op: 3,
						sign_in: this.datatime,
					};
					let res = await train.record(params);
					if (res.code == 1) {
						this.coach_list = res.data
						this.qiandao = false
						this.datatime = ''
					} else {
						// uni.showToast({
						// 	title:'请勾选学员课节！',
						// 	icon:'exception',
						// 	duration:850
						// });
					}
				} else {
					uni.showToast({
						title: '请选择签到时间',
						icon: 'exception',
						duration: 850
					});

				}
			},
			change(event) {
				this.selectList = event.detail
				this.applicantlist = []
				this.selectList.forEach((ex, ix) => {
					this.studentlist.forEach((el, idx) => {
						if (ix == idx) {
							this.applicantlist.push(el.id)
						}

					})

				})
			},
			allChange(event) {
				this.isAllSelect = event.detail
				if (this.isAllSelect) {
					this.selectList = []
					// for (let i = 0; i < this.studentlist.length; i++) {
					// 	this.selectList.push(i.toString())
					// }
					this.studentlist.forEach((item, index) => {
						if (item.is_leave != 2) {
							this.selectList.push(index.toString())
						}
					})
					this.selectList = this.selectList
					this.applicantlist = []
					this.studentlist.forEach((el, idx) => {
						if (el.is_leave != 2) {
							this.applicantlist.push(el.id)
						}
					})
				} else {
					this.selectList = []
					this.applicantlist = []
				}
			},

			onChange(event) {

			},
			toggle(item) {
				item.checked = !item.checked
				this.selectItemId = ''
				this.applicantlist = []
				this.studentlist.forEach((el, idx) => {
					if (el.checked) {
						this.applicantlist.push(el.id)
					}

				})
				// this.applicant = this.applicantlist.toString()
			},
			handOpenMenu(index) {
				this.selectItemId = index
			},
			// 签到
			handSignIn(item, index) {
				this.signInShow = true
				this.qiandao = true
			},
			// 取消签到
			qiandaoguanbi() {
				this.qiandao = false
				this.datatime = ''
			},
			// signInConfirm(){
			// 	this.signInShow = false
			// },
			//0请假，1评课
			//操作类型：1请假，2评课，3签到，4签退，5约课，6调课，7消课，8结课
			handAskLeave(state) {
				if (this.applicantlist != '') {
					uni.navigateTo({
						// url: `/page_admin/coach-side/class-home/class-deail/ask-leave/ask-leave?state=${state}`
						url: `/page_admin/coach-side/class-home/class-deail/ask-leave/ask-leave?applicantlist=${encodeURIComponent(JSON.stringify(this.applicantlist))}` +
							"&state=" + state + "&id=" + this.hour_info.id + "&train_content=" + this.hour_info
							.train_content + "&hour_time=" + this.hour_info.hour_time + "&time_long=" + this
							.hour_info
							.time_long + "&name=" + this.name,
					})
				} else {
					uni.showModal({
						title: '请选择学员',
						icon: 'none'
					})
				}

			},
			handAskList() {
				uni.showToast({
					title: '暂未开通！',
					icon: 'none',
					duration: 850
				});

			},
			//预约
			handSelectClass() {
				// uni.navigateTo({
				// 	url: `/page_admin/coach-side/class-home/class-sub/class-select?applicantlist=${encodeURIComponent(JSON.stringify(this.applicantlist))}` +
				// 		 "&id=" + this.hour_info.id + "&train_content=" + this.hour_info.train_content+ "&hour_time=" + this.hour_info.hour_time+ "&time_long=" + this.hour_info.time_long+ "&name=" + this.name,
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.control {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding-bottom: 120rpx;

		/deep/.u-tabs {
			background-color: #fff;
			border-bottom: 1px solid #E5E5E5;
			margin: 0 30rpx;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}

		.header {
			position: relative;

			image {
				width: 100%;
				display: block;
			}

			.info-box {
				position: absolute;
				left: 0;
				height: 100%;
				width: 100%;
				top: 0;
				display: flex;
				flex-direction: column;
				z-index: 2;

				.info {
					padding: 30rpx 30rpx;
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: space-between;

					.title {
						color: rgb(51, 51, 51);
						font-size: 30rpx;
						font-weight: 700;
					}

					.state {
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						font-weight: 500;
					}

					.tag-list {
						margin-top: 21rpx;

						.tag {
							padding: 5rpx 20rpx 5rpx;
							font-size: 24rpx;
							font-weight: 500;
							background-color: rgb(255, 255, 255);
							border-radius: 40.5rpx;
							color: rgb(41, 166, 241);
							margin-right: 20rpx;

							&:nth-of-type(2) {
								color: rgb(255, 143, 5);
							}
						}
					}

					.info-item {
						margin-right: 50rpx;
						color: rgb(51, 51, 51);
						font-size: 20rpx;
						font-weight: 500;

						&:last-of-type {
							margin-left: 0;
						}

						text {
							margin-left: 4rpx;
						}
					}
				}
			}
		}

		.tongji {
			padding: 32rpx 30rpx 31rpx;
			background-color: rgb(243, 243, 243);

			.item {
				margin-right: 33rpx;
				color: rgb(51, 51, 51);
				font-size: 30rpx;
				font-weight: 500;

				.value {
					color: rgb(250, 47, 76);
					font-size: 30rpx;
					font-weight: 700;
				}
			}
		}

		.list {
			width: 100%;
			flex: 1;
			height: 0;
			padding: 0 30rpx;
			box-sizing: border-box;

			.item {
				// padding: 30rpx 0;
				width: 100%;
				border-bottom: 2rpx solid rgb(229, 229, 229);

				&:last-of-type {
					border: none;

					// .menu-list {
					// 	bottom: 0;
					// }
				}

				/deep/ .van-checkbox {
					overflow: inherit;
				}

				/deep/ .van-checkbox__label {
					flex: 1;
				}

				.desc {
					color: rgb(153, 153, 153);
					font-size: 22rpx;
					font-weight: 500;
					line-height: 21rpx;
					padding: 20rpx 20rpx 54rpx;
					background-color: rgb(243, 243, 243);
					border-radius: 5rpx;
					margin-left: 164rpx;
					margin-top: 14rpx;
					position: relative;

					&:before {
						content: '';
						display: block;
						position: absolute;
						top: -20rpx;
						left: 18rpx;
						border-left: 12rpx solid transparent;
						border-right: 12rpx solid transparent;
						border-top: 0rpx solid transparent;
						border-bottom: 20rpx solid rgb(243, 243, 243);
					}
				}

				.item-detail {
					.avatar {
						position: relative;
						margin-right: 20rpx;

						.age {
							position: absolute;
							padding: 3rpx 0 3rpx;
							width: 60rpx;
							text-align: center;
							background-color: rgb(47, 117, 250);
							border-radius: 30rpx;
							color: rgb(255, 255, 255);
							font-size: 22rpx;
							left: 0;
							right: 0;
							margin: auto;
							bottom: -5rpx;
							z-index: 2;
						}

						.age-1 {
							background-color: rgb(255, 95, 255);
							position: absolute;
							padding: 3rpx 0 3rpx;
							width: 60rpx;
							text-align: center;
							border-radius: 30rpx;
							color: rgb(255, 255, 255);
							font-size: 22rpx;
							left: 0;
							right: 0;
							margin: auto;
							bottom: -5rpx;
							z-index: 2;
						}
					}

					.name {
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						font-weight: 500;
						margin-bottom: 10rpx;
					}

					// 签到
					.qiandao {
						.age {
							position: absolute;
							padding: 3rpx 0 3rpx;
							width: 60rpx;
							text-align: center;
							background-color: rgb(47, 117, 250);
							border-radius: 30rpx;
							color: rgb(255, 255, 255);
							font-size: 22rpx;
							left: -310rpx;
							right: 0;
							margin: auto;
							bottom: 15rpx;
							z-index: 2;
						}

						.age-1 {
							background-color: rgb(255, 95, 255);
							position: absolute;
							padding: 3rpx 0 3rpx;
							width: 60rpx;
							text-align: center;
							border-radius: 30rpx;
							color: rgb(255, 255, 255);
							font-size: 22rpx;
							left: -310rpx;
							right: 0;
							margin: auto;
							bottom: 15rpx;
							z-index: 2;
						}

						.qian-item {
							font-size: 22rpx;
							font-weight: 500;
							margin-right: 20rpx;

							.label {
								color: rgb(107, 196, 113);
								margin-right: 4rpx;
							}
						}
					}

					.qingjia {
						display: flex;

						.qingjia-item {
							width: 73rpx;
							height: 30rpx;
							background-color: rgba(250, 63, 63, 0.2);
							border-radius: 5rpx;
							border: solid 2rpx rgb(250, 63, 63);
							color: rgb(250, 63, 63);
							font-size: 22rpx;
							font-weight: 500;
							margin-right: 20rpx;
						}
					}

				}

				.menu-box {
					position: absolute;
					right: 0rpx;
					top: 40%;


					.menu-list {
						position: absolute;
						background-color: rgb(255, 255, 255);
						box-shadow: 0px 4rpx 4rpx rgba(0, 0, 0, 0.05);
						border-radius: 24rpx;
						right: 50rpx;
						z-index: 3;
						// opacity: 0;
						height: 0;
						transition: opacity 0.5s;
						overflow: hidden;
						top: 0;

						.item {
							color: rgb(51, 51, 51);
							font-size: 26rpx;
							font-weight: 500;
							border-bottom: solid 2rpx rgb(238, 238, 238);
							padding: 27rpx 30rpx;
							white-space: nowrap;

							view {
								margin-left: 12rpx;
							}
						}
					}

					image {
						width: 8rpx;
						height: 30rpx;
					}

					.active {
						height: auto;
						opacity: 1;
					}
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px -8rpx 51rpx rgba(0, 0, 0, 0.04);
			padding: 30rpx 30rpx;

			/deep/ .van-checkbox__label {
				flex: 1;
			}

			.label {
				color: rgb(51, 51, 51);
				font-size: 26rpx;
				font-weight: 500;
			}

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}


	.overlay {
		position: fixed;
		width: 100%;
		height: 100vh;
		left: 0;
		bottom: 0;
		padding: 0px 97rpx;
		// padding-bottom: 110rpx;
		padding-bottom: 28vh;
		background-color: rgba(255, 255, 255, 0.6);
		backdrop-filter: blur(2px);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		opacity: 0;
		transition: all 0.3s;
		z-index: -1;

		.title {
			color: rgb(51, 51, 51);
			font-size: 36rpx;
			font-weight: 700;
			text-align: center;
		}

		.bg-menu {
			margin-top: 70rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-row-gap: 50rpx;
			grid-column-gap: 50rpx;
			margin-bottom: 50rpx;

			.bg-menu-item {
				color: rgb(51, 51, 51);
				height: 244rpx;
				width: 244rpx;
				font-size: 30rpx;
				flex-direction: column;
				font-weight: 700;
				white-space: nowrap;
				background-color: rgb(255, 255, 255);
				box-shadow: 0px 0px 33.58rpx 12.42rpx rgba(150, 59, 235, 0.09);
				border-radius: 40rpx;
				position: relative;

				view {
					margin-top: 8rpx;
				}
			}
		}
	}

	.show {
		z-index: 5;
		opacity: 1;
	}
</style>